<template>
  <div class="dialog" v-show="isVisible">
    <div class="mask"></div>
    <div class="dialog-content">
      <h3>{{ dialogTitle }}</h3>
      <ul>
        <li>
          姓名：
          <input type="text" v-model="formData.name" />
        </li>
        <li>
          地址：
          <input type="text" v-model="formData.address" />
        </li>
        <li>
          成绩：
          <input type="text" v-model="formData.grade" />
        </li>
        <li>
          <input type="submit" @click="handleSubmitClick" value="提交" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // props: ['formData', 'isVisible'],
  props: {
    dialogTitle: {
      type: String,
    },
    formData: {
      type: Object,
    },
    isVisible: {
      type: Boolean,
    },
  },
  methods: {
    handleSubmitClick() {
      // 子组件，怎么处理逻辑呢？ 子组件将参数告诉父组件，让父组件来处理
      this.$emit('submitClick')
    },
  },
}
</script>

<style></style>
